<template>
  <div class="search">
    <van-nav-bar
      :zIndex="9999"
      placeholder
      custom-class="nav-bar"
      title-class="nav-bar-title"
      title="商户搜索"
    >
      <van-icon
        @click="goBack"
        name="arrow-left"
        color="#fff"
        slot="left"
        size="42rpx"
        custom-style="margin-bottom:16rpx"
      />
    </van-nav-bar>
    <div style="height:100rpx"></div>
    <div class="search" :style="{ top: navBarHeight + 10 + 'px' }">
      <div class="btn" @click="onSelectCity">
        <div class="text">{{ commonCity.name }}</div>
        <div class="icon"></div>
      </div>
      <div class="input-box">
        <div class="icon"></div>
        <input
          class="input"
          :value="searchKey"
          @input="onInput"
          @confirm="onConfirm"
          placeholder="请输入商户名称"
          confirm-type="search"
          focus
        />
      </div>
    </div>
    <!-- <div class="list-box">
      <a class="item" v-for="(item, index) in 20" :key="index">
        <div class="left">全家便利店上南路全家便利店上南路全家便利店上南路全家便利店上南路</div>
        <div class="right">约2309个结果</div>
      </a>
    </div> -->

    <scroll-view
      class="list-box"
      scroll-y
      v-if="!isShowHotList"
      @scrolltolower="scrolltolower"
    >
      <template>
        <div
          class="item"
          v-for="(item, index) in searchList"
          :key="index"
          @click="toLink(item.id)"
        >
          <div class="pic">
            <img :src="item.logo" mode="scaleToFill" />
            <div class="txt" :class="{ dis: item.business_status == 2 }">
              {{ item.business_status == 1 ? "营业中" : "已打烊" }}
            </div>
          </div>
          <div class="right-box">
            <div class="flex-box">
              <div class="info">
                <div class="name">{{ item.name }}</div>
                <div class="address">
                  <div class="left">{{ item.address }}</div>
                  <div class="right" v-if="item.distance != -1">
                    {{ item.distance }}
                  </div>
                </div>
                <div class="tag" v-if="item.tag">
                  <text class="tips">{{ item.tag }}</text>
                </div>
                <div class="txt time">营业时间{{ item.business_hours }}</div>
                <div class="txt" v-if="item.explain">“{{ item.explain }}”</div>
              </div>
              <div class="right-btn">
                <div class="btn navig" @click.stop="openLocation(item)">
                  <div class="icon"></div>
                  <div class="txt">导航</div>
                </div>
                <div class="btn phone">
                  <div class="icon"></div>
                  <div class="txt" @click.stop="makePhoneCall(item.tel)">
                    打电话
                  </div>
                </div>
              </div>
            </div>

            <div class="amount-box" v-if="item.amount_user < 10">
              <text class="icon">惠</text>
              <text class="txt">{{ item.amount_user }}折</text>
            </div>
          </div>
        </div>
      </template>

      <!--未搜到-->
      <div class="list-none" v-if="total == 0">
        <div class="pic"></div>
        <div class="txt">抱歉，没有找到您要的结果</div>
      </div>
      <!--未搜到End-->
      <uni-load-more
        :status="status"
        :icon-size="12"
        :content-text="contentText"
        v-if="total > 5"
      />
    </scroll-view>
    <!--猜你喜欢-->
    <div class="recommend-box" v-if="isShowHotList">
      <div class="title">猜你喜欢</div>
      <div class="main">
        <a
          :url="'/pages/shanghu/details?id=' + item.id"
          hover-class="none"
          class="item"
          v-for="(item, index) in randomList"
          :key="index"
        >
          {{ item.name }}
        </a>
      </div>
    </div>
    <!--猜你喜欢End-->
  </div>
</template>

<script>
import { mapState } from "vuex";
import uniLoadMore from "@dcloudio/uni-ui/lib/uni-load-more/uni-load-more.vue";
var long = 0,
  lat = 0;
export default {
  components: { uniLoadMore },
  data() {
    return {
      searchList: [],
      navBarHeight: 0,
      randomList: [],
      searchKey: "",
      currentPage: 0,
      total: 10,
      pageSize: 15,
      status: "more",
      contentText: {
        contentdown: "上拉加载更多",
        contentrefresh: "加载中...",
        contentnomore: "没有更多了"
      },
      isShowHotList: true
    };
  },
  computed: {
    ...mapState(["commonCity"])
    // isShowHotList(){
    //   return this.searchKey.length==0&&this.searchList.length==0
    // }
  },
  onLoad() {
    this.navBarHeight = uni.getSystemInfoSync().statusBarHeight + 44;
    this.getRandomRecommend();
    this.getLocation();
  },
  methods: {
    openLocation(item) {
      let { name, address, lng, lat } = item;
      wx.openLocation({
        name,
        address,
        latitude: Number(lat),
        longitude: Number(lng),
        fail: err => {
          console.log(err);
        }
      });
    },
    makePhoneCall(tel) {
      uni.makePhoneCall({
        phoneNumber: tel
      });
    },
    toLink(id) {
      uni.navigateTo({
        url: "/pages/shanghu/details?id=" + id
      });
    },
    scrolltolower() {
      this.getMerchantNear();
    },
    onInput(e) {
      if (e.detail.value) return;
      this.isShowHotList = true;
      this.searchList = [];
      this.total = 10;
    },
    getRandomRecommend() {
      this.$api.getRandomRecommend({ type: 1 }).then(res => {
        if (res.code == 200) {
          this.randomList = res.data;
        }
      });
    },
    getLocation() {
      uni.getLocation({
        type: "wgs84",
        success: res => {
          let { longitude, latitude } = res;
          long = longitude;
          lat = latitude;
        }
      });
    },
    getMerchantNear() {
      if (this.currentPage >= Math.ceil(this.total / this.pageSize)) {
        this.status = "noMore";
        return;
      }
      this.$api
        .getMerchantNear({
          lat: lat,
          lng: long,
          city: this.commonCity.id,
          name: this.searchKey,
          pageSize: this.pageSize,
          page: this.currentPage + 1
        })
        .then(res => {
          if (res.code == 200) {
            let { total, data } = res.data;
            this.total = total;
            this.currentPage++;
            if (this.currentPage == 1) {
              this.searchList = [];
            }
            this.searchList = this.searchList.concat(data);
          }
        });
    },
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    onSelectCity() {
      uni.navigateTo({
        url: "/pages/addressIndex/addressIndex"
      });
    },
    async onConfirm(e) {
      this.searchKey = e.detail.value;
      this.currentPage = 0;
      this.total = 10;
      if (this.searchKey) {
        await this.getMerchantNear();
        this.isShowHotList = false;
      }
    }
  }
};
</script>

<style lang="scss">
.search {
  .nav-bar {
    .van-nav-bar__left {
      left: 20rpx;
    }
    background: linear-gradient(
      270deg,
      rgba(44, 172, 255, 1) 0%,
      rgba(40, 123, 252, 1) 100%
    );
  }
  .nav-bar-title {
    color: #fff;
  }
  overflow: hidden;
  color: #666666;
  font-size: 28rpx;
  .search {
    width: 690rpx;
    height: 68rpx;
    position: absolute;
    left: 30rpx;
    background: #ffffff;
    box-shadow: 0 2rpx 10rpx 0 rgba(0, 0, 0, 0.2);
    border-radius: 30rpx;
    box-sizing: border-box;
    padding: 14rpx 0;
    display: flex;
    align-items: center;
    z-index: 9999;
    .btn {
      flex: 0 0 150rpx;
      border-right: 1px solid #e7e7e7;
      color: #494949;
      font-size: 26rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon {
        margin-left: 20rpx;
        flex: 0 0 25rpx;
        height: 25rpx;
        background: url(https://media.wxcwy.com/mini/images/dwxl_icon@2x.png) no-repeat center center;
        background-size: 100% 100%;
      }
    }
    .input-box {
      flex: 1;
      padding-left: 20rpx;
      display: flex;
      align-items: center;
      color: #b2b2b2;
      font-size: 26rpx;
      .input {
        color: #333;
      }
      .icon {
        flex: 0 0 35rpx;
        height: 35rpx;
        background: url(https://media.wxcwy.com/mini/images/search_icon@2x.png) no-repeat center center;
        background-size: 100% 100%;
        margin-right: 12rpx;
      }
    }
  }
  .list-box {
    height: calc(100vh - 290rpx);
    box-sizing: border-box;
    background: #f4f4f4;
    .item {
      padding: 20rpx;
      overflow: hidden;
      margin-bottom: 20rpx;
      background: #fff;
      display: flex;
      &:last-child {
        border: none;
      }
      .pic {
        flex: 0 0 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        overflow: hidden;
        position: relative;
        .txt {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 44rpx;
          line-height: 44rpx;
          text-align: center;
          background: #028dff;
          color: #fff;
          font-size: 24rpx;
          &.dis {
            background: #999999;
          }
        }
      }
      .right-box {
        // display: flex;
        .amount-box {
          color: #ee4130;
          font-size: 26rpx;
          display: flex;
          line-height: 36rpx;
          border-top: 1px solid #e7e7e7;
          padding-top: 16rpx;
          .icon {
            background: rgba(238, 65, 48, 0.13);
            width: 36rpx;
            height: 36rpx;
            text-align: center;
            line-height: 36rpx;
            margin-right: 10rpx;
            // background-image: url(https://media.wxcwy.com/mini/images/dwbl_icon@2x.png);
          }
        }
        .flex-box {
          display: flex;
          .info {
            margin: 0 25rpx;
            flex: 0 0 370rpx;
            color: #787878;
            .name {
              color: #000000;
              font-size: 32rpx;
              font-weight: bold;
              line-height: 45rpx;
              margin-bottom: 20rpx;
            }
            .address {
              display: flex;
              align-items: center;
              .left {
                flex: 0 0 230rpx;
                font-size: 26rpx;
                line-height: 36rpx;
              }
              .right {
                height: 55rpx;
                line-height: 55rpx;
                margin-left: 16rpx;
                padding-left: 10rpx;
                flex: 0 0 100rpx;
                text-align: center;
                font-size: 24rpx;
                border-left: 1px solid #e7e7e7;
              }
            }
            .tag {
              margin: 10rpx 0;
              overflow: hidden;
              display: flex;
              .tips {
                height: 32rpx;
                border-radius: 6rpx;
                border: 1px solid #ff764f;
                color: #ff624f;
                font-size: 22rpx;
                padding: 0 10rpx;
              }
            }
            .txt {
              font-size: 24rpx;
              line-height: 32rpx;
              margin-bottom: 10rpx;
              &.time {
                margin-bottom: 10rpx;
              }
            }
          }
          .right-btn {
            flex: 0 0 130rpx;
            margin-top: 60rpx;
            .btn {
              display: block;
              width: 130rpx;
              height: 52rpx;
              line-height: 52rpx;
              text-align: center;
              margin-bottom: 35rpx;
              box-sizing: border-box;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 24rpx;
              background: linear-gradient(
                270deg,
                rgba(44, 172, 255, 1) 0%,
                rgba(40, 123, 252, 1) 100%
              );
              border-radius: 8rpx;
              color: #fff;
              .icon {
                margin-right: 6rpx;
              }
              &.navig {
                .icon {
                  width: 35rpx;
                  height: 34rpx;
                  background: url(https://media.wxcwy.com/mini/images/dh_icon@2x.png) no-repeat center
                    center;
                  background-size: 100% 100%;
                }
              }
              &.phone {
                background: #fff;
                border: 1px solid #1571ff;
                color: #1571ff;
                .icon {
                  width: 23rpx;
                  height: 28rpx;
                  background: url(https://media.wxcwy.com/mini/images/tel_icon@2x.png) no-repeat center
                    center;
                  background-size: 100% 100%;
                }
              }
            }
          }
        }
      }

      &.active {
        .pic {
          .txt {
            background: #999999;
          }
        }
      }
    }
  }
  .list-none {
    padding: 150rpx 0;
    overflow: hidden;
    text-align: center;
    color: #666666;
    font-size: 26rpx;
    .pic {
      margin: 0 auto;
      width: 438rpx;
      height: 437rpx;
      background: url(https://media.wxcwy.com/mini/images/searchblank@2x.png) no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .recommend-box {
    overflow: hidden;
    padding: 25rpx;
    .title {
      margin-bottom: 25rpx;
      color: #999999;
      font-size: 26rpx;
      line-height: 38rpx;
    }
    .main {
      overflow: hidden;
      .item {
        display: block;
        float: left;
        height: 62rpx;
        line-height: 62rpx;
        margin: 0 16rpx 16rpx 0;
        padding: 0 24rpx;
        color: #333333;
        font-size: 24rpx;
        background: #f4f4f4;
        border-radius: 32rpx;
      }
    }
  }
}
</style>
